<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label-width="120px" label-position="left" label="企业名称" prop="crewName">
                <el-input v-model="queryParams.enterpriseNameCn" placeholder="企业名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="类型" prop="customerClassCode">
              <el-select v-model="queryParams.customerClassCode" placeholder="请输入注册类型" clearable>
                <el-option
                  v-for="item in registerClassOptions"
                  :key="item.id"
                  :label="item.customerClass"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label-width="120px" label-position="left">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:news:add']"
            >新增</el-button>
          </el-col>
            <el-col :span="24">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="resumeList" border>
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="企业名称（英文）" align="center" prop="enterpriseName" width="140" />
      <el-table-column label="企业名称（中文）" align="center" prop="enterpriseNameCn" width="140"/>
            <el-table-column label="企业编码" align="center" prop="enterpriseNo" />
            <el-table-column label="类型" align="center" prop="registerTypeName" />
            <el-table-column label="管理员" align="center" prop="userNameCn" />
            <el-table-column label="国家/地区" align="center" prop="countryCn" >
                <template slot-scope="scope">
                    <div>{{ scope.row.countryCn }}/{{ scope.row.area }}</div>
                </template>
            </el-table-column>
            <el-table-column label="注册时间" align="center" prop="createTime" >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="会员等级" align="center" prop="gradeNameCn" />
            <el-table-column label="会员有效期" align="center" prop="memberStartTime">
                <template slot-scope="scope">
                    <div>{{ parseTime(scope.row.memberStartTime)}}/{{ parseTime(scope.row.memberEndTime)}}</div>
                </template>
            </el-table-column>
            <el-table-column label="子账号" align="center" prop="projectCnName" />
            <el-table-column label="排序" align="center" prop="sortKey" />
            <el-table-column label="已服务次数" align="center" prop="numberOfServices" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.isPartner==null||scope.row.isPartner==0"
                        v-hasPermi="['system:resume:detail']" @click="openDialog('合作伙伴',cooperateForm,scope.row)">设为合作伙伴</el-button>
                    <el-popconfirm title="确定取消合作伙伴吗？" @confirm="cancelCooperate(scope.row)"  v-if="scope.row.isPartner&&scope.row.isPartner==1">
                        <el-button slot="reference" size="mini" type="text" icon="el-icon-edit"
                        v-hasPermi="['system:resume:detail']">取消合作伙伴</el-button>
                    </el-popconfirm>
                    <el-button size="mini" type="text" icon="el-icon-edit"
                        v-hasPermi="['system:resume:detail']" @click="viewDetail(scope.row)">查看</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit"
                        v-hasPermi="['system:resume:detail']" @click="openDialog('会员等级',memberForm,scope.row)">会员等级</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit"
                        v-hasPermi="['system:resume:detail']" @click="openDialog('服务次数',serviceForm,scope.row)">服务次数</el-button>
<!--                    <el-button size="mini"-->
<!--                               v-if="scope.row.isPartner&&scope.row.isPartner==1"-->
<!--                               type="text"-->
<!--                               icon="el-icon-edit"-->
<!--                               v-hasPermi="['system:resume:remove']"-->
<!--                               @click="openDialog('设置企业介绍链接',enterpriseLinkForm,scope.row)">设置企业介绍链接</el-button>-->
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="changeStatus(scope.row)"
                      v-if="['修船厂','制造商','供应商','技术/服务'].includes(scope.row.registerTypeName)"
                      v-hasPermi="['system:resume:controlShowHome']"
                    >{{scope.row.isShowHome=='0'?'展示首页':'取消展示首页'}}</el-button>

                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="changeResumeFlag(scope.row)"
                    > {{ scope.row.viewResumeFlag === '1' ? '取消查看简历' : '查看简历'}}</el-button>

                    <el-button size="mini" type="text" icon="el-icon-edit"
                        v-hasPermi="['system:resume:detail']" @click="openDialog('编辑排序',sortForm,scope.row)">编辑排序</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <el-dialog :title="modalTitle" :visible="dialogVis" @close="cancel" :destroy-on-close="true" width="1000px"
            append-to-body>
            <el-form ref="form" :model="form" :rules="rules">
                <el-row v-if="modalTitle == '合作伙伴'">
                    <el-col :span="21" :offset="1">

                        <el-form-item label="合作伙伴:" label-position="right" label-width="140px">
                          {{ form.enterpriseName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                    <el-form-item label="展现位置:" label-position="right" label-width="140px">
                        <el-select v-model="form.showLocationList" style="width:100%" multiple>
                            <el-option
                                    v-for="dict in dict.type.enterprise_show_location"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                />
                            </el-select>
                    </el-form-item>

                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="排序:" label-position="right" label-width="140px">
                            <el-input type="number" max="9999" placeholder="请输入" v-model="form.showSort"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row v-if="modalTitle == '会员等级'">
                    <el-col :span="24">
                        <div style="text-align: center;margin-bottom: 30px;">请确认会员信息，并在下方执行升级服务开通</div>
                    </el-col>
                    <el-col :span="12" :offset="5">
                        <el-form-item label="会员等级:" label-position="right" label-width="140px">
                            <el-select style="width: 100%;" v-model="form.memberGrade">
                                <el-option
                                    v-for="dict in memberGradeList"
                                    :key="dict.id"
                                    :label="dict.gradeNameCn"
                                    :value="dict.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="5">
                        <el-form-item label="会员有效期" label-position="right" label-width="140px">
                            <el-date-picker
                                style="width: 100%;"
                                v-model="dateValue"
                                @change="setDate"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                >
                                </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="modalTitle == '服务次数'">

                    <el-col :span="18" :offset="1">
                        <el-form-item label="服务次数修改为:" label-position="right" label-width="140px">
                            <el-input type="number" placeholder="请输入" v-model="form.numberOfServices"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <div style="padding-left:60px;margin-bottom: 30px;">注意：次数修改后，该企业的服务次数将不会再自动更新，后续请手动更新；</div>
                    </el-col>
                </el-row>
                <el-row v-if="modalTitle == '设置企业介绍链接'">
                  <el-col :span="18" :offset="1">
                    <el-form-item label="企业介绍链接:" label-position="right" label-width="140px">
                      <el-input type="text" placeholder="请输入" v-model="form.introductionLink"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="modalTitle == '编辑排序'">
                  <el-col :span="18" :offset="1">
                    <el-form-item label="排序:" label-position="right" label-width="140px">
                      <el-input type="number" placeholder="请输入" v-model="form.sortKey"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <div>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button type="primary" @click="submitForm" v-if="modalTitle == '服务次数'">重置为默认</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </div>
        </el-dialog>

        <detailDialog :value.sync="detailVis" :formInfo="formInfoValue"></detailDialog>
      <el-dialog :title="'新增企业'" :visible="addDialog" @close="addDialogCancel" :destroy-on-close="true" width="1000px"
                 append-to-body>
        <el-form ref="form" :model="addForm" :rules="rules">
          <el-row>
            <el-col :span="18" :offset="1">
              <el-form-item label="企业名称:" label-position="right" label-width="140px">
                <el-input type="text" placeholder="请输入" v-model="addForm.enterpriseNameCn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="18" :offset="1">
              <el-form-item label="地区:" label-position="right" label-width="140px">
                <el-select v-model="addForm.continentCode" @change="continentCodeChange" placeholder="请选择">
                  <el-option
                    v-for="item in continentOptionList"
                    :key="item.continentCode"
                    :label="item.continentName"
                    :value="item.continentCode">
                  </el-option>
                </el-select>
                <el-select v-model="addForm.countryId" placeholder="请选择">
                  <el-option
                    v-for="item in countryOptionList"
                    :key="item.id"
                    :label="item.countryName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="18" :offset="1">
              <el-form-item label="角色:" label-position="right" label-width="140px">
                <el-select v-model="addForm.registerType" placeholder="请选择">
                  <el-option
                    v-for="item in registerOptionList"
                    :key="item.id"
                    :label="item.customerClass"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <div>
            <el-button type="primary" @click="addSubmitForm">确 定</el-button>
            <el-button @click="addDialogCancel">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import {
    enterpriseList,setPartner,unsetPartner, updateMemberGrade,updateServiceNumber,getFormInfo,setIntroductionLink,isOrNotShowHome, setModifyResumeFlag, add
} from "@/api/system/enterprise";
import detailDialog from "./detail.vue";
import {getRegisterOption, getRegisterOptionForEdit} from "@/api/system/register";
import {listAllForRegisterClassId} from '@/api/system/memberGrade'
import {getOptionList} from '@/api/system/country'
export default {
    name: 'enterprise',
    dicts: ['enterprise_show_location','membership_level'],
    data() {
        return {
            formInfoValue:{

            },
            dateValue:'',
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                projectName: null
            },
            showSearch: true,
            loading: true,
            resumeList: [],
            total: 0,
            cooperateForm: { //合作伙伴表单
                id:undefined,
                enterpriseName:undefined,
                showSort:undefined,
                showLocation:undefined,
            },
            memberForm:{ //会员等级表单
                id:undefined,
                memberGrade:undefined,
                memberStartTime:undefined,
                memberEndTime:undefined,
            },
            serviceForm:{//服务次数表单
                id:undefined,
                numberOfServices:undefined,
            },
            enterpriseLinkForm:{//企业介绍链接表单
              id:undefined,
              introductionLink:undefined,
            },
            sortForm:{// 排序
              id:undefined,
              sortKey:undefined,
            },
            form:{

            },
            rules:{

            },
            dialogVis:false,
            modalTitle:'',
            detailVis:false,
            addDialog: false,
            addForm: { //新增表单表单
              id:undefined,
              enterpriseName:undefined,
              showSort:undefined,
              showLocation:undefined,
              countryId: undefined,
              continentCode: undefined

            },
          registerOptionList: [],
          memberGradeList: [],
          showLocationList: [],
          areaList: [],
          countryOptionList: [],
          continentOptionList: [],
          registerClassOptions:[],
        }
    },
    components:{
        detailDialog,
    },
    created() {
        this.getList()
        this.getRegisterClassOptions()
    },
    methods: {
      getRegisterClassOptions(){
        getRegisterOptionForEdit().then(response => {
          this.registerClassOptions = response.data;
        });
      },
        viewDetail(row){
            getFormInfo(row.id).then((res)=>{
                this.formInfoValue=res.data
                this.detailVis=true
            })
        },
        cancelCooperate({id}){
            unsetPartner({id}).then(()=>{
                this.$modal.msgSuccess("操作成功");
                this.getList()
            })
        },
        openDialog(name,form,row){
            this.modalTitle=name
            if(name=='合作伙伴') form.enterpriseName=row.enterpriseName
            if(name=='编辑排序') form.sortKey=row.sortKey
            this.form=form
            this.form.id=row.id
            this.dialogVis=true
          let registerType = row.registerType;
          if (registerType) {
            this.listAllForRegisterClassId(registerType)
          }
        },
        // 搜索列表
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = this.resetFormData(this.queryParams);
            this.handleQuery();
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            enterpriseList(this.queryParams).then(response => {
                this.resumeList = response.rows;
                this.total = response.total;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            });
        },
        cancel() {
            this.reset();
            this.dialogVis = false;
        },
        addDialogCancel() {
          this.addReset();
          this.addDialog = false;
        },
        reset() {
            this.dateValue=''
            this.form = this.resetFormData(this.form);
        },
        addReset() {
          this.addForm = this.resetFormData(this.addForm);
        },
        setDate(date){
            this.form.memberStartTime=date[0]
            this.form.memberEndTime=date[1]
        },
        submitForm(){
         if(this.modalTitle=='合作伙伴'){
            setPartner(this.form).then((res)=>{
                this.$modal.msgSuccess("操作成功");
                this.form= this.resetFormData(this.form);
                this.dialogVis=false
                this.getList()
            })
         }
         if(this.modalTitle=='会员等级'){
            updateMemberGrade(this.form).then((res)=>{
                this.$modal.msgSuccess("操作成功");
                this.form= this.resetFormData(this.form);
                this.dialogVis=false
                this.getList()
            })
         }
         if(this.modalTitle=='服务次数'){
            updateServiceNumber(this.form).then((res)=>{
                this.$modal.msgSuccess("操作成功");
                this.form= this.resetFormData(this.form);
                this.dialogVis=false
                this.getList()
            })
         }
          if(this.modalTitle=='设置企业介绍链接'){
            setIntroductionLink(this.form).then((res)=>{
              this.$modal.msgSuccess("操作成功");
              this.form= this.resetFormData(this.form);
              this.dialogVis=false
              this.getList()
            })
          }
          if(this.modalTitle=='编辑排序'){
            updateMemberGrade(this.form).then((res)=>{
                this.$modal.msgSuccess("操作成功");
                this.form= this.resetFormData(this.form);
                this.dialogVis=false
                this.getList()
            })
          }
        },

        addSubmitForm() {
          add(this.addForm).then((res) => {
            this.$modal.msgSuccess("操作成功");
            this.addForm= this.resetFormData(this.addForm);
            this.addDialog=false
            this.getList()
          })
        },
        changeStatus(row){
          this.$confirm(`确定要${row.isShowHome=='0'?'展示首页':'取消展示首页'}吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            isOrNotShowHome({id:row.id}).then((res)=>{
              this.$message({
                type: 'success',
                message: '操作成功'
              });
              this.getList()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消'
            });
          });
        },

        changeResumeFlag({id}){
            setModifyResumeFlag(id).then(()=>{
              this.$message({
                type: 'success',
                message: '操作成功'
              });
              this.getList()
            })
        },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.addDialog = true;
        if (!this.registerOptionList || this.registerOptionList.length == 0) {
          this.getRegisterOption();
        }

        this.listArea();
      },
      getRegisterOption() {
        getRegisterOption().then((res) => {
          let data = res.data;
          this.registerOptionList = data;

        })
      },
      listAllForRegisterClassId(registerClassId) {
        let param = {
          registerClassId: registerClassId
        }
        listAllForRegisterClassId(param).then((res) => {
          this.memberGradeList = res.data;
        })
      },
      listArea(){

        if (this.areaList && this.areaList.length > 0) {
          return;
        }
        getOptionList().then((res) => {
          this.areaList = res.data;


          let continentOptionList = []
          res.data.map((item) => {
            if (!continentOptionList.some((child) => child.continentName === item.continentName)) {
              continentOptionList.push(item)
            }
          })
          this.continentOptionList = continentOptionList;

        });
      },
      continentCodeChange(value){
        if (value) {
          let filterArr = this.areaList
          this.countryOptionList = filterArr.filter((item) => {
            if (value == item.continentCode) {
              return item
            }
          })
          this.addForm.countryId = undefined
        } else {
          this.addForm.countryId = undefined
          this.countryOptionList = this.areaList
        }
      }
    }
}
</script>
